<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DormDB Demo - 数据库自助申请平台演示</title>
    
    <!-- Vue 3 CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    
    <!-- Axios for HTTP requests -->
    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"></script>
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        'sans': ['Inter', 'system-ui', 'sans-serif'],
                    },
                    colors: {
                        'primary': {
                            50: '#eef2ff',
                            100: '#e0e7ff',
                            200: '#c7d2fe',
                            300: '#a5b4fc',
                            400: '#818cf8',
                            500: '#6366f1',
                            600: '#4f46e5',
                            700: '#4338ca',
                            800: '#3730a3',
                            900: '#312e81',
                        },
                        'secondary': {
                            50: '#faf5ff',
                            100: '#f3e8ff',
                            200: '#e9d5ff',
                            300: '#d8b4fe',
                            400: '#c084fc',
                            500: '#a855f7',
                            600: '#9333ea',
                            700: '#7c3aed',
                            800: '#6b21a8',
                            900: '#581c87',
                        }
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'pulse-slow': 'pulse 3s ease-in-out infinite',
                        'bounce-slow': 'bounce 2s infinite',
                        'gradient': 'gradient 8s ease infinite',
                        'shimmer': 'shimmer 2s linear infinite',
                        'fade-in': 'fadeIn 0.5s ease-out',
                        'slide-up': 'slideUp 0.5s ease-out',
                        'scale-in': 'scaleIn 0.3s ease-out',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0px)' },
                            '50%': { transform: 'translateY(-20px)' },
                        },
                        gradient: {
                            '0%, 100%': { backgroundPosition: '0% 50%' },
                            '50%': { backgroundPosition: '100% 50%' },
                        },
                        shimmer: {
                            '0%': { transform: 'translateX(-100%)' },
                            '100%': { transform: 'translateX(100%)' },
                        },
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        },
                        scaleIn: {
                            '0%': { transform: 'scale(0.9)', opacity: '0' },
                            '100%': { transform: 'scale(1)', opacity: '1' },
                        },
                    },
                    backdropBlur: {
                        'xs': '2px',
                    }
                }
            },
            darkMode: 'class',
        }
    </script>
    
    <!-- 自定义样式 -->
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        /* 渐变背景 */
        .gradient-bg {
            background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #f5576c, #4facfe, #00f2fe);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }
        
        /* 玻璃效果 */
        .glass {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        
        .glass-dark {
            background: rgba(0, 0, 0, 0.25);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* 浮动装饰元素 */
        .floating-shape {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            animation: float 6s ease-in-out infinite;
        }
        
        .floating-shape:nth-child(1) {
            width: 80px;
            height: 80px;
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }
        
        .floating-shape:nth-child(2) {
            width: 120px;
            height: 120px;
            top: 20%;
            right: 10%;
            animation-delay: 2s;
        }
        
        .floating-shape:nth-child(3) {
            width: 60px;
            height: 60px;
            bottom: 20%;
            left: 20%;
            animation-delay: 4s;
        }
        
        .floating-shape:nth-child(4) {
            width: 100px;
            height: 100px;
            bottom: 10%;
            right: 20%;
            animation-delay: 1s;
        }
        
        /* 渐变文本 */
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* 按钮样式 */
        .btn-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            overflow: hidden;
        }
        
        .btn-gradient::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }
        
        .btn-gradient:hover::before {
            left: 100%;
        }
        
        /* 抖动动画 */
        .shake {
            animation: shake 0.5s ease-in-out;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
        
        /* 脉冲动画 */
        .pulse-ring {
            animation: pulse-ring 2s infinite;
        }
        
        @keyframes pulse-ring {
            0% {
                transform: scale(0.8);
                opacity: 1;
            }
            100% {
                transform: scale(2.4);
                opacity: 0;
            }
        }
        
        /* 输入框聚焦效果 */
        .input-focus:focus {
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        /* 卡片悬停效果 */
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        /* 加载动画 */
        .loading-dots {
            display: inline-block;
        }
        
        .loading-dots::after {
            content: '.';
            animation: dots 1.5s steps(5, end) infinite;
        }
        
        @keyframes dots {
            0%, 20% {
                color: rgba(0,0,0,0);
                text-shadow:
                    .25em 0 0 rgba(0,0,0,0),
                    .5em 0 0 rgba(0,0,0,0);
            }
            40% {
                color: currentColor;
                text-shadow:
                    .25em 0 0 rgba(0,0,0,0),
                    .5em 0 0 rgba(0,0,0,0);
            }
            60% {
                text-shadow:
                    .25em 0 0 currentColor,
                    .5em 0 0 rgba(0,0,0,0);
            }
            80%, 100% {
                text-shadow:
                    .25em 0 0 currentColor,
                    .5em 0 0 currentColor;
            }
        }
    </style>
</head>
<body class="gradient-bg min-h-screen">
    <div id="app">
        <!-- 浮动装饰元素 -->
        <div class="floating-shape"></div>
        <div class="floating-shape"></div>
        <div class="floating-shape"></div>
        <div class="floating-shape"></div>
        
        <!-- 主容器 -->
        <div class="min-h-screen flex items-center justify-center p-4 sm:p-6 lg:p-8">
            <div class="glass rounded-3xl shadow-2xl p-6 sm:p-8 lg:p-10 max-w-2xl w-full relative overflow-hidden card-hover animate-fade-in">
                <!-- 背景装饰 -->
                <div class="absolute top-0 right-0 w-32 h-32 bg-white bg-opacity-10 rounded-full -mr-16 -mt-16"></div>
                <div class="absolute bottom-0 left-0 w-40 h-40 bg-white bg-opacity-5 rounded-full -ml-20 -mb-20"></div>
                
                <!-- 头部 -->
                <div class="relative z-10 text-center mb-8">
                    <div class="inline-flex items-center justify-center w-20 h-20 bg-white bg-opacity-20 rounded-full mb-6 animate-pulse-slow">
                        <i class="fas fa-database text-3xl text-white"></i>
                    </div>
                    <h1 class="text-4xl sm:text-5xl font-bold text-white mb-4 animate-slide-up">
                        <i class="fas fa-server mr-3"></i>DormDB
                    </h1>
                    <p class="text-xl text-white text-opacity-90 animate-slide-up" style="animation-delay: 0.1s;">
                        数据库自助申请平台 - 演示版
                    </p>
                </div>
                
                <!-- 演示说明 -->
                <div class="relative z-10 bg-yellow-100 bg-opacity-90 border border-yellow-200 rounded-xl p-4 mb-8 animate-slide-up" style="animation-delay: 0.2s;">
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-yellow-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-yellow-800 font-semibold mb-2">
                                <i class="fas fa-clipboard-list mr-2"></i>演示说明
                            </h3>
                            <p class="text-yellow-700 text-sm leading-relaxed">
                                这是 DormDB 前端界面的演示版本。点击"申请数据库"按钮将显示模拟的成功结果，展示完整的用户界面和功能。
                            </p>
                        </div>
                    </div>
                </div>
                
                <!-- 申请表单 -->
                <form @submit.prevent="submitDemo" class="relative z-10 space-y-6 animate-slide-up" style="animation-delay: 0.3s;">
                    <div>
                        <label for="studentId" class="block text-white font-semibold mb-3 text-lg">
                            <i class="fas fa-id-card mr-2"></i>身份标识 (学号)
                        </label>
                        <div class="relative">
                            <input 
                                type="text" 
                                id="studentId"
                                v-model="form.studentId"
                                :class="[
                                    'w-full px-4 py-4 bg-white bg-opacity-90 border-2 rounded-xl text-gray-800 placeholder-gray-500 transition-all duration-300 input-focus',
                                    form.errors.studentId ? 'border-red-400 shake' : 'border-transparent focus:border-white'
                                ]"
                                placeholder="请输入您的学号，例如：20250701"
                                :disabled="isSubmitting"
                            >
                            <div class="absolute inset-y-0 right-0 flex items-center pr-4">
                                <i class="fas fa-user text-gray-400"></i>
                            </div>
                        </div>
                        <div v-if="form.errors.studentId" class="mt-2 text-red-200 text-sm flex items-center animate-slide-up">
                            <i class="fas fa-exclamation-triangle mr-2"></i>
                            {{ form.errors.studentId }}
                        </div>
                        <div class="mt-3 text-white text-opacity-80 text-sm flex items-center">
                            <i class="fas fa-lightbulb mr-2 text-yellow-300"></i>
                            请输入您的学号或唯一身份标识，只能包含字母、数字和下划线
                        </div>
                    </div>
                    
                    <button 
                        type="submit" 
                        :disabled="isSubmitting"
                        class="w-full py-4 px-6 btn-gradient text-white font-bold text-lg rounded-xl transition-all duration-300 transform hover:scale-105 hover:shadow-2xl disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
                    >
                        <span v-if="!isSubmitting" class="flex items-center justify-center">
                            <i class="fas fa-rocket mr-3"></i>
                            申请数据库 (演示)
                        </span>
                        <span v-else class="flex items-center justify-center">
                            <i class="fas fa-spinner fa-spin mr-3"></i>
                            处理中<span class="loading-dots"></span>
                        </span>
                    </button>
                </form>
                
                <!-- 结果展示 -->
                <div v-if="showResult" class="relative z-10 mt-8 animate-scale-in">
                    <!-- 成功消息 -->
                    <div class="bg-green-100 bg-opacity-95 rounded-xl p-6 mb-6">
                        <div class="flex items-center mb-4">
                            <div class="flex-shrink-0">
                                <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center animate-bounce-slow">
                                    <i class="fas fa-check text-white text-xl"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-green-800 font-bold text-xl">
                                    <i class="fas fa-party-horn mr-2"></i>数据库创建成功！
                                </h3>
                                <p class="text-green-700 mt-1">请保存以下连接信息：</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 连接信息 -->
                    <div class="bg-white bg-opacity-95 rounded-xl p-6 space-y-4">
                        <h4 class="text-gray-800 font-bold text-lg mb-4 flex items-center">
                            <i class="fas fa-key mr-2 text-blue-500"></i>
                            数据库连接信息
                        </h4>
                        
                        <!-- 连接信息项 -->
                        <div v-for="(item, index) in connectionInfo" :key="item.label" 
                             class="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-200 hover:border-blue-300 transition-all duration-200 animate-slide-up"
                             :style="{ animationDelay: (index * 0.1) + 's' }">
                            <div class="flex items-center space-x-3 flex-1">
                                <i :class="item.icon + ' text-gray-600'"></i>
                                <span class="font-semibold text-gray-700 min-w-0 w-24">{{ item.label }}:</span>
                                <code class="flex-1 bg-white px-3 py-2 rounded border text-sm font-mono text-gray-800 break-all">{{ item.value }}</code>
                            </div>
                            <button 
                                @click="copyToClipboard(item.value, index)"
                                :class="[
                                    'ml-3 px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 transform hover:scale-105',
                                    copiedStates[index] ? 'bg-green-500 text-white' : 'bg-blue-500 text-white hover:bg-blue-600'
                                ]"
                            >
                                <i :class="copiedStates[index] ? 'fas fa-check' : 'fas fa-copy'" class="mr-2"></i>
                                {{ copiedStates[index] ? '已复制' : '复制' }}
                            </button>
                        </div>
                        
                        <!-- 一键复制所有 -->
                        <div class="pt-4 border-t border-gray-200">
                            <button 
                                @click="copyAllInfo"
                                class="w-full py-3 px-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg"
                            >
                                <i class="fas fa-clipboard mr-2"></i>
                                一键复制所有连接信息
                            </button>
                        </div>
                        
                        <!-- 重要提示 -->
                        <div class="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                            <div class="flex items-start space-x-3">
                                <i class="fas fa-exclamation-triangle text-yellow-600 text-lg mt-0.5"></i>
                                <div>
                                    <h5 class="text-yellow-800 font-semibold mb-2">重要提示：</h5>
                                    <ul class="text-yellow-700 text-sm space-y-1 list-disc list-inside">
                                        <li>这是演示数据，非真实的数据库连接信息</li>
                                        <li>实际使用时，请立即保存真实的连接信息</li>
                                        <li>建议将密码保存到安全的密码管理器中</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 页脚 -->
                <div class="relative z-10 text-center mt-10 pt-6 border-t border-white border-opacity-20 animate-slide-up" style="animation-delay: 0.4s;">
                    <p class="text-white text-opacity-80 mb-2">
                        <i class="fas fa-code mr-2"></i>
                        DormDB v1.0.0 | 数据库自助申请平台
                    </p>
                    <div class="flex items-center justify-center space-x-6 text-sm">
                        <a href="/" class="text-white text-opacity-80 hover:text-white transition-colors duration-200 flex items-center">
                            <i class="fas fa-home mr-2"></i>返回主页
                        </a>
                        <a href="/swagger-ui/" target="_blank" class="text-white text-opacity-80 hover:text-white transition-colors duration-200 flex items-center">
                            <i class="fas fa-book mr-2"></i>API 文档
                        </a>
                        <a href="/admin" class="text-white text-opacity-80 hover:text-white transition-colors duration-200 flex items-center">
                            <i class="fas fa-cog mr-2"></i>管理面板
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Toast 通知 -->
        <div class="fixed top-4 right-4 z-50 space-y-2">
            <div v-for="toast in toasts" :key="toast.id" 
                 :class="[
                     'max-w-sm w-full shadow-lg rounded-lg pointer-events-auto overflow-hidden transform transition-all duration-300 animate-slide-up',
                     getToastClass(toast.type)
                 ]">
                <div class="p-4">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i :class="getToastIcon(toast.type) + ' text-lg'"></i>
                        </div>
                        <div class="ml-3 w-0 flex-1">
                            <p class="text-sm font-medium">{{ toast.title }}</p>
                            <p v-if="toast.message" class="mt-1 text-sm opacity-90">{{ toast.message }}</p>
                        </div>
                        <div class="ml-4 flex-shrink-0 flex">
                            <button @click="removeToast(toast.id)" class="inline-flex text-current hover:opacity-75 transition-opacity">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        const { createApp, ref, reactive, computed, onMounted, nextTick } = Vue;
        
        // Toast 管理器
        const ToastManager = {
            toasts: ref([]),
            toastId: 0,
            
            show(type, title, message = '', duration = 3000) {
                const toast = {
                    id: ++this.toastId,
                    type,
                    title,
                    message,
                    timestamp: Date.now()
                };
                
                this.toasts.value.push(toast);
                
                setTimeout(() => {
                    this.remove(toast.id);
                }, duration);
                
                return toast.id;
            },
            
            remove(id) {
                const index = this.toasts.value.findIndex(toast => toast.id === id);
                if (index > -1) {
                    this.toasts.value.splice(index, 1);
                }
            },
            
            success(title, message) {
                return this.show('success', title, message);
            },
            
            error(title, message) {
                return this.show('error', title, message);
            },
            
            info(title, message) {
                return this.show('info', title, message);
            }
        };
        
        // 主应用
        const DormDBDemo = {
            setup() {
                // 响应式状态
                const state = reactive({
                    form: {
                        studentId: 'demo123',
                        errors: {}
                    },
                    isSubmitting: false,
                    showResult: false,
                    copiedStates: {}
                });
                
                // 计算属性
                const connectionInfo = computed(() => {
                    const studentId = state.form.studentId || 'demo123';
                    return [
                        {
                            label: '主机地址',
                            value: 'sql.iluwen.cn',
                            icon: 'fas fa-server'
                        },
                        {
                            label: '端口',
                            value: '49500',
                            icon: 'fas fa-plug'
                        },
                        {
                            label: '数据库名',
                            value: `db_${studentId}`,
                            icon: 'fas fa-database'
                        },
                        {
                            label: '用户名',
                            value: `user_${studentId}`,
                            icon: 'fas fa-user'
                        },
                        {
                            label: '密码',
                            value: 'DemoPassword123!@#',
                            icon: 'fas fa-key'
                        }
                    ];
                });
                
                // 方法
                const methods = {
                    // 验证学号
                    validateStudentId(studentId) {
                        const errors = {};
                        
                        if (!studentId) {
                            errors.studentId = '请输入学号';
                        } else if (!/^[a-zA-Z0-9_]+$/.test(studentId)) {
                            errors.studentId = '学号只能包含字母、数字和下划线';
                        } else if (studentId.length > 50) {
                            errors.studentId = '学号长度不能超过50个字符';
                        }
                        
                        state.form.errors = errors;
                        return Object.keys(errors).length === 0;
                    },
                    
                    // 提交演示表单
                    async submitDemo() {
                        const studentId = state.form.studentId.trim();
                        
                        if (!this.validateStudentId(studentId)) {
                            ToastManager.error('表单错误', '请检查输入的学号格式');
                            return;
                        }
                        
                        state.isSubmitting = true;
                        
                        try {
                            // 模拟API请求延迟
                            await new Promise(resolve => setTimeout(resolve, 1500));
                            
                            // 显示结果
                            state.showResult = true;
                            state.copiedStates = {};
                            
                            ToastManager.success('演示成功', '数据库连接信息已生成（演示数据）');
                            
                            // 滚动到结果区域
                            await nextTick();
                            const resultElement = document.querySelector('.animate-scale-in');
                            if (resultElement) {
                                resultElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
                            }
                            
                        } catch (error) {
                            ToastManager.error('演示失败', '模拟请求出现错误');
                        } finally {
                            state.isSubmitting = false;
                        }
                    },
                    
                    // 复制到剪贴板
                    async copyToClipboard(text, index) {
                        try {
                            if (navigator.clipboard && window.isSecureContext) {
                                await navigator.clipboard.writeText(text);
                            } else {
                                // 降级方案
                                const textArea = document.createElement('textarea');
                                textArea.value = text;
                                textArea.style.position = 'fixed';
                                textArea.style.left = '-999999px';
                                textArea.style.top = '-999999px';
                                document.body.appendChild(textArea);
                                textArea.focus();
                                textArea.select();
                                document.execCommand('copy');
                                textArea.remove();
                            }
                            
                            // 设置复制状态
                            state.copiedStates[index] = true;
                            
                            // 2秒后重置状态
                            setTimeout(() => {
                                state.copiedStates[index] = false;
                            }, 2000);
                            
                            ToastManager.success('复制成功', '内容已复制到剪贴板');
                            
                        } catch (error) {
                            console.error('复制失败:', error);
                            ToastManager.error('复制失败', '无法复制到剪贴板');
                        }
                    },
                    
                    // 复制所有连接信息
                    async copyAllInfo() {
                        const info = connectionInfo.value;
                        const allInfo = `数据库连接信息：\n${info.map(item => `${item.label}: ${item.value}`).join('\n')}\n\n注意：这是演示数据，非真实连接信息`;
                        
                        try {
                            if (navigator.clipboard && window.isSecureContext) {
                                await navigator.clipboard.writeText(allInfo);
                            } else {
                                // 降级方案
                                const textArea = document.createElement('textarea');
                                textArea.value = allInfo;
                                textArea.style.position = 'fixed';
                                textArea.style.left = '-999999px';
                                textArea.style.top = '-999999px';
                                document.body.appendChild(textArea);
                                textArea.focus();
                                textArea.select();
                                document.execCommand('copy');
                                textArea.remove();
                            }
                            
                            ToastManager.success('复制成功', '所有连接信息已复制到剪贴板');
                            
                        } catch (error) {
                            console.error('复制失败:', error);
                            ToastManager.error('复制失败', '无法复制到剪贴板');
                        }
                    },
                    
                    // 获取Toast样式类
                    getToastClass(type) {
                        const classes = {
                            success: 'bg-green-500 text-white',
                            error: 'bg-red-500 text-white',
                            info: 'bg-blue-500 text-white'
                        };
                        return classes[type] || classes.info;
                    },
                    
                    // 获取Toast图标
                    getToastIcon(type) {
                        const icons = {
                            success: 'fas fa-check-circle',
                            error: 'fas fa-exclamation-circle',
                            info: 'fas fa-info-circle'
                        };
                        return icons[type] || icons.info;
                    }
                };
                
                // 生命周期
                onMounted(() => {
                    // 显示欢迎消息
                    setTimeout(() => {
                        ToastManager.info('欢迎使用', 'DormDB 演示版已加载完成');
                    }, 1000);
                });
                
                // 返回组件接口
                return {
                    // 状态
                    ...state,
                    toasts: ToastManager.toasts,
                    
                    // 计算属性
                    connectionInfo,
                    
                    // 方法
                    ...methods,
                    removeToast: ToastManager.remove
                };
            }
        };
        
        // 配置 Axios
        axios.defaults.withCredentials = true;
        axios.defaults.timeout = 10000;
        
        // 请求拦截器
        axios.interceptors.request.use(
            config => {
                return config;
            },
            error => {
                return Promise.reject(error);
            }
        );
        
        // 响应拦截器
        axios.interceptors.response.use(
            response => {
                return response;
            },
            error => {
                if (error.response && error.response.status === 401) {
                    console.log('未授权访问');
                }
                return Promise.reject(error);
            }
        );
        
        // 创建并挂载应用
        createApp(DormDBDemo).mount('#app');
    </script>
</body>
</html>
